<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
 <%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript" src="statics/js/jquery-1.8.3.min.js" ></script>
<script type="text/javascript">
     
     $(function(){
     	$(".viewBookInfo").click(function(){
     		$obj=$(this);
     		$.ajax({
     			type:"get",
     			url:"",
     			
     		});
     	});
    	 
     });





     function doPage(pageNo){
    	 document.getElementById("pageNo").value=pageNo;
    	 document.getElementById("form1").submit();
     }
     function doPage1(){
    
    	 document.getElementById("pageNo").value=document.getElementById("pageNumber").value;
    	 document.getElementById("form1").submit();
    	
    	
     }
     function doPage2() {
    
    	 document.getElementById("form2").submit();
	}
     
     function selectAll() {
			var sel = document.getElementById('cbkAll');
			var f = sel.checked;
			var ckb = document.getElementsByName('cbk');
			for(var i = 0; i < ckb.length; i++) {
				ckb[i].checked = f;
			}
		}
		
		function selectOne() {
			var f = true;
			var ckb = document.getElementsByName('cbk');
			var sel = document.getElementById('cbkAll');
			for(var i = 0; i < ckb.length; i++) {
				if(ckb[i].checked != f) {
					sel.checked = false;
					break;
				}
				sel.checked = f;
			}
		}
		
       
		



</script>
<body>
<div style="width:900px; margin:0px auto">
  <h3 style="width:900px; margin:0px auto; text-align:center">图书信息类别</h3>
        
        <div style="width:900px; margin:0px auto; text-align:center; line-height:35px; height:35px">
                      欢迎 ${username} 访问图书管理系统  
        <form action="getBookList2" method="post" id="form1">
        图书分类：
         
          <select name="typeId" id="typeId">
           <option value="-1">全部</option>
            <!-- 判断list1是否为空 list1是通过request传输的 -->
            <c:if test="${not empty requestScope.list1}">
            <!-- 循环输出list里的bookType对象  option的value值与对象一一对应，否则无法判断选取的是那一个option-->
            <c:forEach var="bookType" items="${requestScope.list1}" >
            <option value="${bookType.typeid}" 
            <c:if test="${map.typeId==bookType.typeid}"> selected="selected"  </c:if>
            
               >${bookType.typename}</option>
            
            </c:forEach>
            
            </c:if>
            
            
          </select>
         
        图书名称：
        
        <input type="text" name="bookName" id="bookName"  value="${map.bookName}"/>
        
        <input type="hidden" id="pageNo" name="pageNo"   >
       
        <input name="radio" type="radio" id="isBorrow3" value="isBorrow" checked="checked" />
        全部
    
        <input type="submit" name="btnQuery" id="btnQuery" value="查询" />
        
        </form>
        
        </div>
  <div style="width:850px; margin:0px auto; text-align:right; line-height:35px; height:35px; padding-right:50px">
  <a href="${pageContext.request.contextPath}/bookAdd.html">添加</a>&nbsp; &nbsp;
  <a href="javascript:doPage2()" >删除所选</a> 
   </div>
        <table width="900" border="1">
          <tr>
          	<td width="59"><label>
          	  <input type="checkbox" name="cbkAll" id="cbkAll"  onclick="selectAll()"/>
          	  全选
          	</label></td>
            <td width="40">图书编号</td>
            <td width="94">图书分类</td>
            <td width="200">图书名称</td>
            <td width="71">操作</td>
            <td width="100">创建时间</td>
            <td width="200">图书封面</td>
            <td width="48">详细</td>
            <td width="48">删除</td>
            <td width="60">修改</td>
          </tr>
      
          <!-- 判断list是否为空 -->
          <c:if test="${not empty requestScope.pageUtil.list}">
              <form method="post" action="delBooks" id="form2">
          <!-- 循环输出list里的bookInfo -->
          <!-- 各行变色使用choose判断奇数行偶数行分别输出样式 -->
          <c:forEach var="bookInfo" items="${requestScope.pageUtil.list}" varStatus="status">
          <tr  <c:choose>
                  <c:when test="${status.index%2==1}">
                     style="background-color:rgb(219,241,212)"
                  </c:when>
                  <c:otherwise>
                     style="background-color:gray"
                  </c:otherwise>
              </c:choose>     >
          	 <td width="59"><label>
          	   <input type="checkbox" name="cbk" id="cbk"  onclick="selectOne()"   value="${bookInfo.id}"/>
          	 
          	 </label></td>
             <td width="40">${bookInfo.id}</td>
             <td width="94">${bookInfo.booktype.typename}</td>
             <td width="200">${bookInfo.name}</td>
             <td width="71">操作</td>
              <td width="100">
              <fmt:formatDate value="${bookInfo.loandate}" pattern="yyyy-MM-dd"/>
              </td>
              <td width="200" style="text-align: center;"><img hight="50" width="30" alt="没有找到" src="${bookInfo.img}"></td>
             <td width="48"><a href="showBooks?id=${bookInfo.id}" class="viewBookInfo" bookInfoid=${bookInfo.id}>详细</a></td>
             <td width="48"><a href="delBook?id=${bookInfo.id}" onClick="return confirm('确定删除么')">删除</a></td>
             <td width="60"><a href="changeBook?id=${bookInfo.id}">修改</a></td>
          </tr>
          
          </c:forEach>
          
          </form>
          
          </c:if>
          
          <tr>
                <td colspan="10" align="center">
            <a href="javascript:doPage(1)">首页</a>&nbsp;
             <a href="javascript:doPage(${requestScope.pageUtil.pageNo-1})">上一页</a>&nbsp;
             <a href="javascript:doPage(${requestScope.pageUtil.pageNo+1})">下一页</a>&nbsp;
            <a href="javascript:doPage(${requestScope.pageUtil.pageTotal})">末页</a>&nbsp;&nbsp;
            
            ${requestScope.pageUtil.pageNo} /${requestScope.pageUtil.pageTotal}页
             &nbsp;
             <!-- 根据输入页面跳转显示-->
          
              <input name="pageNumber" type="text" id="pageNumber" size="5" value=""/>
              <input type="submit" name="btnQuery2" id="btnQuery2" value="GO"  onclick="doPage1()"/>  
          
              </td>
          </tr>
        </table>
  </div>
</body>
</html>